<!-- @format -->

<script setup>
	// 数据源（对象数组）
	const tableData = [
		{
			date: '2016-05-03',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles'
		},
		{
			date: '2016-05-02',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles'
		},
		{
			date: '2016-05-04',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles'
		},
		{
			date: '2016-05-01',
			name: 'Tom',
			address: 'No. 189, Grove St, Los Angeles'
		}
	]
</script>

<template>
	<!-- 
    el-table: 表格组件, 在 element-plus 中，表格是由跟多列构成的
      data: 数据源，根据这个数据渲染生成列结构
      style: 行内样式 
  -->
	<el-table
		border
		stripe
		:data="tableData"
		style="width: 100%">
		<!-- 
      el-table-column: 表示一列
        label: 列名称
        prop: 填充的数据属性名称
        width: 列宽度
    -->
		<el-table-column
			prop="date"
			label="日期"
			width="180" />
		<el-table-column
			prop="name"
			label="名称"
			width="180" />
		<el-table-column
			prop="address"
			label="地址" />
	</el-table>
</template>
